<template>
  <base-modal
    class="form-builder-modal"
    :show.sync="visble"
  >
    <template slot="title">
      <div class="form-builder-title" >{{ isShowRelationTask ? $t('task.setting.taskFieldsSetting.formNewSetting', {name: modeName}) : $t('task.setting.taskFieldsSetting.formSetting', {name: modeName})}}</div>
      <el-button class="form-builder-save-btn" plain @click="submit" :disabled="pending">{{$t('common.base.save')}}</el-button>
    </template>

    <!-- start 表单设计器 -->
    <!--   TO DO 表单设计器的限制字段由后端提供参数 HAVE DONE 当为工单表单设计器的时候不限制字段数量由后端保存接口去提示限制 -->
    <div class="task-form-design" v-loading.lock="pending">
      <form-design
        ref="formDesign"
        v-if="init"
        v-model="fields"
        :mode="mode"
        :template-id="templateId"
        :template-name="templateName"
        :fields="fields"
        :is-open-quality="isOpenQuality"
        :max="mode == 'task_receipt' || mode == 'task' ? 999999 : 100"
        :common-fields="commonFields"
        :relation-field-options="relationOptions"
        :isShowRelationTask="isShowRelationTask"
        :isDisableCommonField="isDisableCommonField"
        @cancelPublicFieldSetting="transformPrivateField"
        @updatePublicFieldSetting="updatePublicFieldSetting"
      ></form-design>
    </div>
    <!-- end 表单设计器 -->

    <!-- 客户关联查询和产品关联查询字段设置关联项弹窗 -->
    <relation-options-modal
      ref="relationOptionsModal"
      @confirm="relationOptionsConfirm"
    >
    </relation-options-modal>
    <!-- start 引用表单 -->
    <relation-forms-modal
      ref="relationFormModal"
      @confirm="relationOptionsConfirm">
    </relation-forms-modal>

  </base-modal>
</template>

<script>
import TaskFieldsSetting from './TaskFieldsSetting';
export default TaskFieldsSetting;
</script>

<style lang="scss">
@import './TaskFieldsSetting.scss';
</style>